*,
*:before,
*:after {
  box-sizing: border-box;
  margin    : 0;
  padding   : 0;
}

$nums      : 8;
$sidePad   : 20px;
$elM       : 0.5%;
$numPerLine: 4;
$elW       : (100% - $elM * $numPerLine * 2) / $numPerLine;


.workList {
  width     : 100%;
  min-height: 20vh;
  max-height: 100vh;
  padding   : $sidePad;

  display  : flex;
  flex-flow: row wrap;

  counter-reset: work;
}

.work {
  width            : $elW;
  height           : 20vh;
  margin           : $elM;
  background-color : rgb(235, 233, 233);
  counter-increment: work;
  position         : relative;
  overflow         : hidden;
  cursor           : pointer;

  &::before {
    content        : "";
    position       : absolute;
    width          : 100%;
    height         : 100%;
    background-size: cover;
    filter         : sepia();
    opacity        : .5;
    will-change    : filter opacity;
  }

  @for $i from 0 through $nums {
    &:nth-child(#{$i})::before {
      background: url("../img/"+$i+".jpg");
    }
  }

  &::after {
    content       : counter(work);
    text-align    : right;
    font-family   : Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size     : 8rem;
    position      : absolute;
    margin        : auto;
    right         : 0;
    bottom        : 0;
    mix-blend-mode: soft-light;
    color         : rgb(248, 248, 250);
    transform     : translate(0, .5em);
    will-change   : transform;
    transition    : transform 0.5s;
  }

  &:hover::after {
    transform: translate(0, 0);
  }
}